<template>
  <div class="welcome">
    <div class="welcome_info">
      <p>欢迎您: {{ userStore.username }}</p>
      <img :src="userStore.avatar" alt="avatar" />
    </div>
    <img src="@/assets/images/welcome2.png" alt="welcome" />
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user'
let userStore = useUserStore()
</script>

<style scoped lang="scss">
.welcome {
  text-align: center;
  margin-top: 50px;
  .welcome_info {
    position: relative;
    display: flex;
    justify-content: left;
    align-items: left;
    margin-top: 20px;
    width: 150px;
    p {
      vertical-align: middle;
      font-size: 20px;
      height: 80px;
      margin-bottom: 30px;
      margin-right: 20px;
      //padding: 10px 20px;
    }
    img {
      margin-left: 10px;
      width: 80px;
      height: 80px;
      border: none;
      border-radius: 50px;
      box-shadow: 0px 0px 5px #ccc;
    }
  }
  img {
    position: absolute;
    left: calc(50% + 100px);
    top: calc(50% - 44px);
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
  }
}
</style>
